<template>
  <div class="specialLocal-product">
    <v-header title="特产" :fixed="true"></v-header>
    <div :style="{height: Vheight + 'px'}"></div>
    <scroll
      ref="verticalScroll"
      :data="specialLocalProductList"
      :pullDownRefresh="true"
      :pullUpLoad="true"
      @pullingDown="onPullingDown"
      @pullingUp="onPullingUp">
      <div class="product-list" :style="{marginBottom: marginBottom + 'px'}">
        <grid :cols="2" :show-lr-borders="false" :show-vertical-dividers="false">
          <grid-item v-for="item in specialLocalProductList" :key="item.id" >
            <div class="product-item" @click="specialDetail(item.id, item)">
              <img v-lazy="item.thumbUrl" alt="">
              <div class="product-text">
                <h4>{{item.name}}</h4>
                <span>¥{{item.price}}</span>
              </div>
              <span class="comment">共{{item.commentCount}}条评价</span>
            </div>
          </grid-item>
        </grid>
      </div>
    </scroll>
  </div>
</template>

<script type='text/ecmascript-6'>
import Scroll from '@/components/scroll/scroll'
import { Grid, GridItem } from 'vux'
import axios from '@/api/axiosApi'
import { isIphoneX } from '@/assets/js/brower'
import VHeader from '@/components/v-header/v-header'

export default {
  data () {
    return {
      specialLocalProductList: [],
      marginBottom: 0
    }
  },
  components: {
    Scroll,
    Grid,
    GridItem,
    VHeader
  },
  created () {
    this.pageNum = 1
    this.pageSize = 10
    this.marginBottom = 0
    this.Vheight = 0
    if (isIphoneX()) {
      this.marginBottom = 22
      this.Vheight = 73
    } else {
      this.marginBottom = 0
      this.Vheight = 60
    }
  },
  mounted () {
    this.$refs.verticalScroll.$el.style.height = (window.innerHeight - 44) + 'px'
    this.getSpecialLocalProductList()
  },
  methods: {
    specialDetail (id, item) {
      this.$store.commit('SET_CURRENT_COMMENT', item)
      this.$router.push(`/specialLocalProductDetail/${id}`)
    },
    getSpecialLocalProductList () {
      let param = {
        target_type: 2,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      axios.get(this, '/v1/featureProduct/', param, (res) => {
        if (res.length === 0) {
          if (this.pageNum === 1) {
            if (this.$refs.verticalScroll) {
              this.$refs.verticalScroll.hiddenPullDown()
            }
          } else {
            this.pageNum--
            if (this.$refs.verticalScroll) {
              this.$refs.verticalScroll.hiddenPullUpLoad()
            }
          }
        } else {
          if (this.pageNum > 1) {
            this.specialLocalProductList = this.specialLocalProductList.concat(res)
          } else {
            this.specialLocalProductList = res
          }
        }
      })
    },
    onPullingUp () {
      this.pageNum++
      this.getSpecialLocalProductList()
    },
    onPullingDown () {
      this.pageNum = 1
      this.getSpecialLocalProductList()
    }
  }
}
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
@import '~@/assets/css/variable.styl'
@import '~@/assets/css/mixins.styl'

.specialLocal-product{
  display flex
  justify-content flex-start
  flex-wrap wrap
  .product-list{
    background #fff
    padding 10px 0
    .product-item{
      position relative 
      display:flex;
      flex-direction: column;
      align-items: center;
      margin 5px
      box-shadow 0 0 4px #dfdfdf
      border-radius 5px
      overflow hidden
      img{
        width 100%
        height 180px
        // padding 5px
      }
      .product-text {
        width 80%
        display flex
        flex-direction column
        align-items flex-start
        h4{
          color $color-text-1 
          font-size $font-size-title
          margin 5px 0
          text-align left
          overflow hidden
          text-overflow  ellipsis 
          white-space nowrap 
          no-wrap()
          width 100%          
        }
        span{
          color $color-level
          font-size $font-size-title
          padding-bottom 10px
        }
      }
      .comment {
        position absolute 
        right 5px
        bottom 9px
        color $color-text-2
        font-size $font-size-small
      }
    }
  }
}
</style>

<style lang="stylus">
  .product-list .weui-grids:before {
    border none
  }
</style>